import React, { useEffect, useMemo, useState } from 'react';
import {
    Button,
    Cascader,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Mentions,
    Select,
    TreeSelect,
    Image,
    message,
    Radio
} from 'antd';
import { userAdd, getUserList, userUpdate } from '@/api/user';
import { useRouter } from 'next/router';
import style from './index.module.css'
import Content from '../Content';

const status_options = [
    { label: '正常', value: 'on' },
    { label: '禁用', value: 'off' }
]
export default function UserForm({ title, editData = {
    sex: 'male',
    status: 'on',
    role: 'user'
} }: { title: string, editData: any }) {
    const [form] = Form.useForm();
    const router = useRouter();
    const [statusOneList, setstatusOneOptions] = useState([])
    const handleSubmit = () => {
        form.validateFields().then(async (values) => {
            if (editData._id) {
                const { _id }: any = editData
                const res = await userUpdate(_id, values);
                message.success('编辑成功');
                router.push('/user');
            } else {
                const res = await userAdd(values);
                message.success('创建成功');
                router.push('/user');
            }
        });
    }

    useEffect(() => {
        if (editData._id) {
            form.setFieldsValue(editData)
        }
    }, [editData])

    return (
        <Content title={title}>
            <Form
                form={form}
                className={style.form}
                // {...formItemLayout}
                variant="filled"
                style={{ maxWidth: 600 }}
                initialValues={editData}
                onFinish={handleSubmit}>
                <Form.Item label="账号" name="name" rules={[{ required: true, message: 'Please input!' }]}>
                    <Input placeholder='请输入' allowClear />
                </Form.Item>
                <Form.Item label="名称" name="nickname">
                    <Input placeholder='请输入' allowClear />
                </Form.Item>
                <Form.Item label="性别" name="sex" rules={[{ required: true, message: 'Please input!' }]}>
                    <Radio.Group>
                        <Radio value={'male'}>男</Radio>
                        <Radio value={'female'}>女</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item name="password" label="密码" rules={[{ required: true, message: 'Please input!' }]}>
                    <Input.Password placeholder='请输入' />
                </Form.Item>
                <Form.Item label="状态" name="status" rules={[{ required: true, message: 'Please input!' }]}>
                    <Radio.Group>
                        <Radio value={'on'}>启用</Radio>
                        <Radio value={'off'}>禁用</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="角色" name="role" rules={[{ required: true, message: 'Please input!' }]}>
                    <Radio.Group>
                        <Radio value={'user'}>用户</Radio>
                        <Radio value={'admin'}>管理员</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item>
                    <Button className={style.btn} type="primary" htmlType="submit">
                        {editData._id ? '保存' : '创建'}
                    </Button>
                </Form.Item>
            </Form>
        </Content>
    )
}
